<template>
    <div class="activity-detail-container">
      <div class="activity-detail-wrapper">
        <!-- 返回按钮 -->
        <div class="back-button" @click="goBack">
          <el-icon><ArrowLeft /></el-icon>
          <span>返回</span>
        </div>
  
        <div class="content-container">
          <!-- 左侧内容区域 -->
          <div class="left-content">
            <h1 class="activity-title">{{ articleDetail.title }}</h1>
            <div class="activity-meta">
              <div class="breadcrumb">
                <span @click="goToHome">首页</span> / 
                <span @click="goToNews">活动</span>
              </div>
              <div class="publish-date">{{ formatDate(publishDate) }}发布</div>
            </div>
  
            <div class="activity-banner" v-if="articleDetail.thumburl">
              <img :src="articleDetail.thumburl" alt="文章封面" />
            </div>
  
            <div class="activity-content" v-html="articleDetail.content"></div>
  
            <div class="activity-status">
              <div class="deadline">
                活动时间：{{ formatDate(articleDetail.start_time) }} - {{ formatDate(articleDetail.end_time) }}
              </div>
              
              <!-- 不同状态的按钮 -->
              <div class="button-container">
                <!-- 状态1: 活动已结束 -->
                <el-button v-if="activityStatus === 'expired'" disabled class="status-button expired">
                  活动已结束
                </el-button>
                
                <!-- 状态2: 活动未开始 -->
                <el-button v-else-if="activityStatus === 'not_started'" disabled class="status-button not-started">
                  活动未开始
                </el-button>
                
                <!-- 状态3: 已参加活动 -->
                <el-button v-else-if="activityStatus === 'joined'" class="status-button joined">
                  已参加活动
                </el-button>
                
                <!-- 状态4: 可以报名 -->
                <el-button v-else type="primary" class="status-button register" @click="register">
                  报名参加活动
                </el-button>
              </div>
            </div>
          </div>
  
          <!-- 右侧资讯区域 -->
          <div class="right-content">
            <div class="news-section">
              <div class="section-header">
                <div class="vector-icon"></div>
                <h2 class="section-title">最新资讯</h2>
                <div class="more-link" @click="goToNewsList">
                  更多 <el-icon><ArrowRight /></el-icon>
                </div>
              </div>
  
              <div class="news-list" v-loading="fetchActivitiesLoading">
                <div class="news-item" v-for="(item, index) in activityList" :key="index" @click="goToNewsDetail(item.id)">
                  <div class="news-title">{{ item.title }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
  import { useRouter, useRoute } from 'vue-router';
  import { formatDate } from '@/utils/index.js';
  import { getArticleDetail, getArticleList, getActivityRegister } from '@/service/article.js';
  import dayjs from 'dayjs';
  import { ElMessage } from 'element-plus';
  
  const router = useRouter();
  const route = useRoute();
  
  // 文章数据
  const articleDetail = ref({});
  const publishDate = ref('');
  const deadline = ref('');
  const activityStatus = ref('active'); // 'active', 'joined', 'expired', 'not_started'
  const activityList = ref([]);
  const fetchActivitiesLoading = ref(false);
  
  // 获取文章详情
  const fetchArticleDetail = async () => {
    try {
      const id = route.params.id;
      if (!id) return;
      
      const res = await getArticleDetail({ id, shopid: 2 });
      if (res.data) {
        articleDetail.value = res.data;
        // 更新页面数据
        if (res.data.update_time) {
          publishDate.value = res.data.update_time;
        }
        
        // 判断活动状态
        if (res.data.start_time && res.data.end_time) {
          const now = dayjs();
          const startTime = dayjs.unix(res.data.start_time);
          const endTime = dayjs.unix(res.data.end_time);
          
          if (now.isBefore(startTime)) {
            // 活动未开始
            activityStatus.value = 'not_started';
          } else if (now.isAfter(endTime)) {
            // 活动已结束
            activityStatus.value = 'expired';
          } else {
            // 活动进行中
            // 检查是否已报名
            if (res.data.is_enroll === 1) {
              activityStatus.value = 'joined';
            } else {
              activityStatus.value = 'active';
            }
          }
        }
      }
    } catch (error) {
      console.error('获取文章详情失败:', error);
    }
  };
  
  const fetchActivities = () => {
    // // 模拟数据，实际项目中应该调用API
    fetchActivitiesLoading.value = true;
    const params = {
        page: 1,
        rows: 5,
        typeid: 0
    }
    getArticleList(params).then((res) => {
        activityList.value = res.data.result;
        fetchActivitiesLoading.value = false;
    })
  };
  
  // 返回上一页
  const goBack = () => {
    router.back();
  };
  
  // 导航方法
  const goToHome = () => {
    router.push('/');
  };
  
  const goToNews = () => {
    router.push('/news');
  };
  
  const goToNewsList = () => {
    router.push('/consultList');
  };
  
  const goToNewsDetail = (id) => {
    router.push(`/consultDetail/${id}`);
  };
  
  // 报名活动
  const register = () => {
    getActivityRegister({id: route.params.id}).then((res) => {
      activityStatus.value = 'joined';
      ElMessage.success('报名成功');
    })
  };
  
  // 切换活动状态（仅用于演示）
  const toggleActivityStatus = () => {
    if (activityStatus.value === 'active') {
      activityStatus.value = 'joined';
    } else if (activityStatus.value === 'joined') {
      activityStatus.value = 'expired';
    } else {
      activityStatus.value = 'active';
    }
  };
  
  onMounted(() => {
    // 获取文章详情
    fetchArticleDetail();
    fetchActivities();
  });
  </script>
  
  <style scoped lang="scss">
  .activity-detail-container {
    display: flex;
    justify-content: center;
    padding: 20px;
    background-color: #ecf4f2;
    min-height: 100vh;
  }
  
  .activity-detail-wrapper {
    width: 1200px;
    
  }
  
  .back-button {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 20px;
    color: #333;
    
    span {
      margin-left: 5px;
    }
    
    &:hover {
      color: #126983;
    }
  }
  
  .content-container {
    display: flex;
    gap: 20px;
  }
  
  .left-content {
    flex: 1;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
  }
  
  .right-content {
    width: 300px;
  }
  
  .activity-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
    line-height: 1.4;
  }
  
  .activity-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    color: #666;
    font-size: 14px;
  }
  
  .breadcrumb {
    span {
      cursor: pointer;
      
      &:hover {
        color: #126983;
      }
    }
  }
  
  .activity-banner {
    width: 100%;
    height: 300px;
    background-color: #eee;
    margin-bottom: 20px;
    border-radius: 8px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  
  .activity-content {
    margin-bottom: 30px;
    line-height: 1.6;
    color: #333;
    
    p {
      margin-bottom: 15px;
    }
  }
  
  .activity-path {
    margin-bottom: 20px;
    color: #666;
    font-size: 14px;
    
    span {
      cursor: pointer;
      
      &:hover {
        color: #126983;
      }
    }
  }
  
  .activity-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
  }
  
  .deadline {
    color: #f56c6c;
    font-weight: 600;
  }
  
  .button-container {
    display: flex;
    gap: 15px;
  }
  
  .status-button {
    min-width: 140px;
    height: 42px;
    // background: linear-gradient(300.26deg, rgba(35, 223, 120, 0.3) 16.21%, rgba(39, 170, 225, 0.3) 47.73%);

    &.expired {
      background-color: #909399;
      border-color: #909399;
      color: #fff;
      cursor: not-allowed;
    }
    
    &.not-started {
      background-color: #909399;
      border-color: #909399;
      color: #fff;
      cursor: not-allowed;
    }
    
    &.joined {
      background-color: #999999;
      border-color: #999999;
      color: #fff;
    }
    
    &.register {
      background-color: #126983;
      border-color: #126983;
    }
  }
  
  .news-section {
    // background-color: #f9f9f9;
    border-radius: 8px;
    padding: 15px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
  }
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    position: relative;
    .vector-icon {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 57%;
  height: 57px;
  background-image: url('@/static/Vector.png');
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 5px;
}
  }
  
  .section-title {
    font-size: 18px;
    font-weight: 500;
    color: #333;
  }
  
  .more-link {
    display: flex;
    align-items: center;
    color: #126983;
    cursor: pointer;
    font-size: 14px;
    
    .el-icon {
      margin-left: 5px;
    }
  }
  
  .news-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  .news-item {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    
    &:last-child {
      border-bottom: none;
    }
    
    &:hover .news-title {
      color: #126983;
    }
  }
  
  .news-title {
    font-size: 14px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  </style>